<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover">
        <meta charset="utf-8">
        <title>rubjs的demo</title>
        <style type="text/css">
            div{
                margin: 10px;
                padding: 10px;
            }
            .hello{
                float:left;;border-width:1px;border-color:#000;border-style:solid;
            }
            .yellow{
                color: yellow
            }
            .red{
                color: red;
            }
            .blue{
                color: blue;
            }
            .small{
               font-size: 12px;
            }
            .big{
                font-size: 16px;
            }
            
        </style>
    </head>
    <body>
        <div id="app">
            <div id="tempid">
                    <div class="form">
                            <h1>表单</h1>
                            <p >单个复选框：</p>
                            <block r-for="arr3">
                                <input type="text" re-blur="getBlur"  r-m="item.name" r-class="{red:!/^[0-9]\d*$/.test(item.name)}"/>
                                {{item.name}}<br/>
                            </block>
                            <input type="checkbox" id="checkbox" r-m="checked">
                            <label for="checkbox">{{ checked }}</label><br/>
                            <textarea ref="text" r-m="tvalue" placeholder="哈哈哈"></textarea>
                            <br/>{{father.name}}<br/>
                            <label for="checkbox">{{ tvalue }}</label><br/>
                            <input r-m="inputVal" />
                            <label for="checkbox">{{ inputVal }}</label><br/>
                            <input type="checkbox"  r-m="checkedArr" value="1">1
                            <input type="checkbox"  r-m="checkedArr" value="2">2
                            <input type="checkbox"  r-m="checkedArr" value="3">3
                            <input type="checkbox"  r-m="checkedArr" value="4">4
                            <label for="checkbox">{{ checkedArr }}</label><br/>
                            <div id="example-4">
                                <input type="radio" id="one" name='aaa' value="One" r-m="picked">
                                <label for="one">One</label>
                                <br>
                                <input type="radio" id="two" name='aaa' value="Two" r-m="picked">
                                <label for="two">Two</label>
                                <br>
                                <span>Picked: {{ picked }}</span>
                            </div>
                            <div id="example-8">
                                <select r-m="selected3">
                                    <option value="" disabled>请选择</option>
                                    <option>A</option>
                                    <option>B</option>
                                    <option>C</option>
                                </select>
                                <span>Selected: {{ selected3 }}</span>
                            </div>
                            <div id="example-5">
                                <select r-m="selected">
                                    <option value="" disabled>请选择</option>
                                    <option>A</option>
                                    <option>B</option>
                                    <option>C</option>
                                </select>
                                <span>Selected: {{ selected }}</span>
                            </div>
                            <div id="example-6">
                                <select r-m="selected1">
                                    <option value="" disabled>请选择</option>
                                    <block r-for="item,index in options">
                                        <option :value="item.value">{{item.text}}</option>
                                    </block>
                                </select>
                                <span>Selected: {{ selected1 }}</span>
                            </div>
                            <div id="example-7">
                                <select r-m="selected2" multiple='multiple' style="width: 100px;height: 200px;">
                                        <option>A</option>
                                        <option>B</option>
                                        <option>C</option>
                                        <option>E</option>
                                        <option>D</option>
                                        <option>F</option>
                                </select>
                                <span>Selected: {{ selected2 }}</span>
                            </div>
                        </div>
                        
                        <div style="float:left;;border-width:1px;border-color:#000;border-style:solid;">
                            <h1>事件变量的处理、计算属性、双向绑定</h1>
                            请输入我的名字<br/>
                            <input  type="text" r-m.stop="name" value='22'/><br/>
                            我的名字是：<span>{{name}}</span><br/>
                            我的生日是：<span>{{birthday}}</span><br/>
                            我的年龄是：{{age}}{{birthday}}<br/>
                            <div style="margin-top:20px;color:blue">
                                关系（计算属性）：<span>{{relationship1}}</span><br/>
                                姓名是：<span>{{father.name}}</span><br/>
                                年龄是：<span>{{father.age}}</span>
                            </div>
                            <div style="margin-top:20px;color:red">
                                关系（计算属性）：<span>{{relationshi2}}</span><br/>
                                姓名是：<span>{{father.father.name}} </span><br/>
                                年龄是：<span>{{father.father.age}}{{.father.father.age}}</span>
                            </div>
                            <a style="display:block;padding-top:20px;color:black" re-click.stop="canIchange">{{name}}我长大了,我今年{{age}}</a>
                            <a style="display:block;padding-top:20px;color:black" re-click.stop="canIchange(2,'aaaa',6,7)">我长大2岁</a>
                            <a style="display:block;padding-top:20px;color:black" re-click.stop="canIchange(step,2)">我长大{{step}}岁</a>
                            <a style="display:block;padding-top:20px;color:black" re-click.stop="canIchange(father.age,2)">我长大n岁</a>
                        </div>
                        <div class="hello seeyou">
                            <h1>class绑定</h1>
                            <h1 re-click="changeColor" class="hi aaa1" r-class="[className1,className2]">我是啥颜色？数组语法</h1>
                            <h1  class="hi" r-class="{red:name=='小明',blue:name=='小明1',className3}">我是啥颜色？对象语法</h1>
                        </div>
                        <div class="hello seeyou">
                            <h1>style绑定</h1>
                            <h1 re-click="changeColor" style="height:90px" class="hi aaa1" r-style="[styleObj,styleObj1,'width:200px']">我是啥颜色？数组语法</h1>
                            <h1 re-click="changeColor" style="height:100px" class="hi" r-style="{font-size:newName+1+'px',color:'green'}">我是啥颜色？对象语法</h1>
                            <h1 re-click="changeColor" style="height:100px" class="hi" r-style="styleObj">我是啥颜色？单对象语法</h1>
                        </div>
                        <div style="float:left;border-width:1px;border-color:#000;border-style:solid;">
                            <h1>表达式</h1>
                            <span>newName + 1 =  {{ newName*1 + 1}}   你猜等于：{{ newName + 1}} ？</span>
                            <span>混淆表达式{{ '{{newName + 1}}'}} {{{{newName + 1}}}}</span>
                        </div>
                        <div style="float:left;border-width:1px;border-color:#000;border-style:solid;">
                            <h1 re-click="changeNum()">循环</h1>
                            <div r-for="arr" style="display: inline-block;" >
                                <span  style="margin-right:10px;" r-for="item1,index1 in arr1">{{item}}*{{item1}}</span>
                                <span  style="margin-right:10px;" r-for="item4,index4 in arr2">{{item4.name}}</span>
                            </div>
                            <block r-for="item,index in arr2"><span r-if="index%2==0" style="margin-right:10px;">{{item.name}}</span></block>
                        </div>
                        <div style="float:left;border-width:1px;border-color:#000;border-style:solid;">
                            <h1 r-if="'小明'==name">r-if="'小明'==name"</h1>
                            <h1 r-elif="'小明1'==name">r-elif="'小明1'==name"</h1>
                            <h1 r-elif="'小明2'==name">r-elif="'小明2'==name"</h1>
                            <h1 r-else>r-else</h1>
                            <h1 r-show="'小明'==name" style="color:red;background:blue;display:block;">我是r-show，条件是'小明'==name</h1>
                        </div>
                        <img style="width:200px;height:200px" src="http://img.zcool.cn/community/018dbd591ac1edb5b3086ed42b91de.jpg" />
                        <img style="width:200px;height:200px" :src="cartImg" />
            </div>
        </div>
    </body>
    <script src="../libs/rub.js"></script> 
    <script type="text/javascript"  src="./template_ext.js"></script>
</html>